<template>
	<!-- 普通用户--报告路况 -->
	<div id="container">
		<button id="btn" @click="handleReport">报告路况</button>
		<el-dialog
			title="报告路况"
			:visible.sync="dialogVisible"
			width="50%"
			append-to-body
			:close-on-click-modal="false"
			@close="cancelReport"
			v-dialogDrag
		>
			<!-- 用户输入的表单部分 -->
			<el-form
				ref="reportForm"
				status-icon
				:model="Form"
				:rules="rules"
				label-width="80px"
			>
				<el-form-item label="事件类型" prop="eType">
					<el-select v-model="Form.eType" placeholder="请选择事件类型">
						<el-option
							v-for="(item, index) in Form.eventTypes"
							:key="index"
							:label="item"
							:value="item"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="eAddress">
					<label slot="label">事件地址</label>
					<el-input
						v-model="Form.eAddress"
						placeholder="请输入事件地址"
					></el-input>
				</el-form-item>
				<el-form-item prop="eBuilding">
					<label slot="label">建筑标识</label>
					<el-input
						v-model="Form.eBuilding"
						placeholder="请输入事件地址"
					></el-input>
				</el-form-item>
				<el-form-item prop="eOuccurrTime">
					<label slot="label">发生时间</label>
					<el-date-picker
						v-model="Form.eOuccurrTime"
						type="datetime"
						style="width: 100%"
						placeholder="选择路况发生时间"
						value-format="yyyy-MM-dd HH:mm:ss"
					></el-date-picker>
				</el-form-item>
				<el-form-item prop="eDescription">
					<label slot="label">事件描述</label>
					<el-input
						v-model="Form.eDescription"
						placeholder="请输入事件描述"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelReport">取 消</el-button>
				<el-button type="primary" @click="handleReport">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'Report',
	computed: mapState(['userName', 'userId']),
	data() {
		/* 自定义发生时间的校验规则 */
		/* 用户报告的时间不能超过此时此刻，即发生在未来 */
		var checkTime = (rule, value, callback) => {
			// 获取当前的时间戳
			const nowDate = new Date().getTime();
			// 获取选择的时间戳
			const selectDate = new Date(value).getTime();
			if (!value) {
				return callback(new Error('发生时间不能为空'));
			} else if (nowDate < selectDate) {
				return callback(new Error('当前选择的时间超出此刻！'));
			} else {
				callback();
			}
		};
		return {
			dialogVisible: false, //默认不显示弹窗
			isReport: false, // 是否处于报告路况的状态
			Form: {
				eType: '擦碰', // select选中的事件类型，默认显示擦碰
				eventTypes: [
					'擦碰',
					'塞车',
					'失火',
					'抛锚',
					'小型车祸',
					'大型车祸',
					'其他',
				], // 可供选择的事件类型
				eAddress: '', //事件地址
				eBuilding: '', //建筑标识
				eOuccurrTime: null, //发生时间
				eDescription: '', // 事件描述
			},
			rules: {
				eOuccurrTime: [
					{ validator: checkTime, trigger: 'change' },
					{ validator: checkTime, trigger: 'blur' },
				],
				eAddress: [
					{ required: true, message: '请输入事件地址！', trigger: 'blur' },
				],
			},
		};
	},
	methods: {
		/* dialog 右上角点击叉后触发的事件 */
		cancelReport() {
			this.dialogVisible = false;

			this.reportForm = [];
		},
		/* 点击报告路况按钮后触发的事件 */
		handleReport() {
			if (this.isReport) {
				this.$confirm('您已处于报告路况界面，请勿重复点击！', '提示', {
					confirmButtonText: '确定',
					type: 'warning',
				});
			} else {
				this.dialogVisible = true;
				this.$refs['reportForm'].validate((valid) => {
					if (valid) {
						// 表单验证成功则发送添加报告路况请求
						const data = {
							user_id: this.userId,
							report_user: this.userName,
							event_type: this.Form.eType,
							event_addr: this.Form.eAddress,
							event_mark: this.Form.eBuilding,
							event_time: this.Form.eOuccurrTime,
							event_describe: this.Form.eDescription,
						};
						this.$http.post('/event', data).then((res) => {
							if (res.code == 0) {
								this.$message.success('报告路况成功');
							}
							this.dialogVisible = false;
							this.$refs[reportForm].resetFields();
						});
					} else {
						this.$message.error('请检查输入的数据！');
					}
				});
			}
		},
	},
};
</script>

<style scoped></style>
